<!-- 临期预警 -->
<template>
  <view class="zeroWarning">
    <view class="table mb20">
      <view class="header disFlex">
        <view class="Item_item tc">商品编号</view>
        <view class="trade_name tc">商品名称</view>
        <view class="commodity_quantity tc">数量</view>
        <view class="maturity_time tc">到期时间</view>
      </view>
      <view class="row disFlex" v-for="(item, index) in coming_goods" :key="index">
        <view class="Item_item flexc">{{ item.goods_sn }}</view>
        <view class="trade_name flexc">{{ item.goods_name }}</view>
        <view class="commodity_quantity flexc">{{ item.stock }}</view>
        <view class="maturity_time flexc">{{ item.endusetime }}</view>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      coming_goods: [],
    };
  },

  //监听页面加载，该钩子被调用时 
  onLoad() {},
  methods: {
    /*首页信息*/ 
    async getHome() {
      let res = await this.$ajax.getHomepage();
      if (res.code == 1) {
        this.coming_goods = res.data.coming_goods; //临期预警
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
  },

  mounted() {
    this.getHome();
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "临期预警",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>
  
<style lang="scss">
.zeroWarning {
  width: 100%;
  height: 100vh;
  background: rgba(244, 244, 244, 1);
  padding: 20rpx 20rpx;

  .table {
    width: 100%;
    background: rgba(255, 255, 255, 1);

    .header {
      // background: rgba(98, 177, 88, 0.9);
      border: 1px solid #ccc;
    }

    .Item_item {
      width: 25%;
      padding: 10px;
      border-right: 1px solid #ccc;
    }

    .trade_name {
      width: 25%;
      padding: 10px;
      border-right: 1px solid #ccc;
    }

    .commodity_quantity {
      width: 20%;
      padding: 10px;
      border-right: 1px solid #ccc;
    }

    .maturity_time {
      width: 30%;
      padding: 10px;
      border-right: 1px solid #ccc;
    }

    .row {
      border: 1px solid #ccc;
    }

    // .row:nth-child(2n-1) {
    //     background: rgba(98, 177, 88, 0.15);
    //     ;
    // }
  }
}
</style>